<template>
    <div class="index-edit-box">
        <go-back @click="beforeGoBack"/>
        <div class="index-box">
            <div class="index-top-box">
                <div class="left">
                    <h3>首页布局</h3>
                    <div class="draw-box">
                        <phone :scrollTop="phoneScroll" ref="phone" @scroll="getScrollTop">
                            <div
                                v-for="(item, index) in dataList"
                                v-dragging="{ item: item, list: dataList, group: 'color'}"
                                :key="item.pageid || (index + 100000)">
                                <div class="model-wai-box">
                                    <div class="model-tools-box">
                                        <span @click="addStep(index)" class="add-up-index-step">向上添加</span>
                                        <span @click="addStep(index + 1)" class="add-down-index-step">向下添加</span>
                                        <span class="remove-index-step" @click="removeStep(item, index)">移除</span>
                                    </div>
                                    <model1000 :data="item" v-if="item.displayType === 1000"/>
                                    <model4100 :data="item" v-else-if="item.displayType === 4100"/>
                                    <model8000 :data="item" v-else-if="item.displayType === 8000"/>
                                    <model7000 :data="item" v-else-if="item.displayType === 7000"/>
                                    <model2000 :data="item" v-else-if="item.displayType === 2000"/>
                                    <model9000 :data="item" v-else-if="item.displayType === 9000"/>
                                    <model3000 :data="item" v-else-if="item.displayType === 3000"/>
                                    <model2100 :data="item" v-else-if="item.displayType === 2100"/>
                                    <model4000 :data="item" v-else-if="item.displayType === 4000"/>
                                    <model5000 :data="item" v-else-if="item.displayType === 5000"/>
                                    <model10000 :data="item" v-else-if="item.displayType === 10000"/>
                                    <model10100 :data="item" v-else-if="item.displayType === 10100"/>
                                    <model10200 :data="item" v-else-if="item.displayType === 10200"/>
                                    <model10300 :data="item" v-else-if="item.displayType === 10300"/>
                                </div>
                            </div>
                        </phone>
                    </div>
                </div>
                <div class="right" v-show="showAdd">
                    <h3>模板库</h3>
                    <div class="draw-box">
                        <div class="model-box">
                            <!-- 精选 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(1000)">添加 精选</span></div>
                                <model1000/>
                            </div>

                            <!-- banner -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(2000)">添加 banner</span></div>
                                <model2000/>
                            </div>

                            <!-- banner+标题 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(2100)">添加 banner+标题</span></div>
                                <model2100/>
                            </div>

                            <!-- banner+游戏信息 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(3000)">添加 banner+游戏信息</span></div>
                                <model3000/>
                            </div>

                            <!-- 轮播+标题 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(4000)">添加 轮播+标题</span></div>
                                <model4000/>
                            </div>

                            <!-- 轮播+游戏信息 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(4100)">添加 轮播+游戏信息</span></div>
                                <model4100/>
                            </div>

                            <!-- 列表 5000 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(5000)">添加 列表</span></div>
                                <model5000/>
                            </div>

                            <!-- icon陈列表 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(7000)">添加 icon陈列表</span></div>
                                <model7000/>
                            </div>

                            <!-- 任务 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(8000)">添加 任务</span></div>
                                <model8000/>
                            </div>

                            <!-- 专属定制 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(9000)">添加 专属定制</span></div>
                                <model9000/>
                            </div>

                            <!-- 游戏单陈列表 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(10000)">添加 游戏单陈列表</span></div>
                                <model10000/>
                            </div>

                            <!-- 游戏单icon陈列表 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(10100)">添加 游戏单icon陈列表</span></div>
                                <model10100/>
                            </div>

                            <!-- 游戏单陈轮播 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(10200)">添加 游戏单陈轮播</span></div>
                                <model10200/>
                            </div>

                            <!-- 游戏单陈精选 -->
                            <div class="model-item">
                                <div class="model-add"><span @click="addSteps(10300)">添加 游戏单陈精选</span></div>
                                <model10300/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="index-bottom-box" v-if="showCancle || dataStepChange">
                <div class="cancle-btn" @click="notSave"><span>取消</span></div>
                <div class="next-btn" @click="saveData">保存</div>
            </div>
        </div>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible">
        <span>你还有操作未做保存，请问是否退出当前编辑，退出后当前编辑不可恢复！</span>
        <span slot="footer">
            <el-button @click="dialogVisible = false">再看看</el-button>
            <el-button type="primary" @click="goback">返  回</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            dataList: [],
            currentList: [],
            phoneScroll: 0,
            showAdd: false, // 添加模板
            dataStepChange: false,
            dialogVisible: false // 提示弹窗
        }
    },
    props: ['data', 'scroll'],
    created () {
        this.phoneScroll = this.scroll
        this.dataList = this.data
        this.currentList = JSON.parse(JSON.stringify(this.data))
    },
    computed: {
        showCancle () {
            let flag = false
            if (this.dataList.length !== this.currentList.length) {
                return true
            }
            for (let i = 0; i < this.dataList.length; i++) {
                if (!this.dataList[i].pageid) {
                    return true
                }
                if (this.dataList[i].pageid !== this.currentList[i].pageid) {
                    return true
                }
            }
            return flag
        }
    },
    mounted () {
        this.$dragging.$on('dragend', (e) => {
            this.dataStepChange = true // 数据改变展示 取消按钮
        })
    },
    methods: {
        getScrollTop (scroll) {
            this.phoneScroll = scroll
        },
        removeStep (item, index) {
            this.dataList.splice(index, 1)
            this.$message({
                message: '移除成功',
                type: 'success'
            })
            this.dataStepChange = true // 数据改变展示 取消按钮
        },

        addSteps (type) {
            this.dataList.splice(this.currentIndex, 0, {
                displayType: type
            })
            this.dataStepChange = true // 数据改变展示 取消按钮
            this.showAdd = false
            this.$message({
                message: '添加成功',
                type: 'success'
            })
        },

        beforeGoBack () {
            if (this.showCancle || this.dataStepChange) {
                this.dialogVisible = true
            } else {
                this.$emit('changeScroll', this.phoneScroll)
                this.goback()
            }
        },

        // 返回上一页
        goback () {
            this.notSave()
            this.$emit('closeShowIndex')
        },

        // 保存首页布局
        saveData () {
            this.dataStepChange = false
            this.currentList = JSON.parse(JSON.stringify(this.dataList))
            this.$emit('changeData', this.currentList)
            this.$emit('changeScroll', this.phoneScroll)
            this.$emit('closeShowIndex')
        },

        addStep (index) {
            this.showAdd = true
            this.currentIndex = index
        },

        // 取消首页布局
        notSave () {
            this.dataStepChange = false
            this.dataList = JSON.parse(JSON.stringify(this.currentList))
            this.$emit('changeData', this.dataList)
        }
    }
}
</script>

<style lang="scss" scoped>
    .index-edit-box {
        height: 100%;
        .index-box {
            height: 100%;
            .index-top-box {
                display: flex;
                .left {
                    flex: 1;
                }
                .right {
                    border-left: 1px solid #ccc;
                    flex: 1;
                }
                h3 {
                    text-align: center;
                }
                .draw-box {
                    margin-top: 20px;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    .model-wai-box {
                        &:hover {
                            background-color: rgba(0, 0, 0, .05);
                        }
                    }
                    .model-box {
                        width: 360px;
                        height: 640px;
                        font-size: 12px;
                        overflow: scroll;
                        border: 1px solid #000000;
                        .model-item {
                            &:hover {
                                background-color: rgba(0, 0, 0, .05);
                            }
                        }
                    }
                }
                .model-add {
                    padding-top: 10px;
                    padding-right: 20px;
                    text-align: right;
                    > span {
                        color: #409EFF;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                .model-tools-box {
                    padding-top: 10px;
                    padding-right: 20px;
                    text-align: right;
                    .add-up-index-step {
                        color: #67C23A;
                        font-size: 14px;
                        cursor: pointer;
                        margin-right: 10px;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    .add-down-index-step {
                        color: #67C23A;
                        font-size: 14px;
                        margin-right: 10px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    .remove-index-step {
                        color: #409EFF;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
            .index-bottom-box {
                width: 500px;
                margin: 0 auto;
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .cancle-btn {
                    height: 35px;
                    width: 150px;
                    color: #F56C6C;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    > span {
                        &:hover {
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }
                .next-btn {
                    background: #409EFF;
                    color: #ffffff;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 35px;
                    width: 150px;
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                    }
                }
            }
        }
    }
</style>
